<!--
 * @Descripttion: (一级装箱明细/prod_one_pack_detail)
 * @Author: (admin)
 * @Date: (2025-05-18)
-->
<template>
	<div>
		<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
			<!-- <el-form-item label="一级装箱id" prop="onePackId">
				<el-input v-model="queryParams.onePackId" placeholder="请输入一级装箱id" />
			</el-form-item> -->
			<el-form-item label="组织" prop="orgCode">
				<el-input v-model="queryParams.orgCode" placeholder="请输入组织" />
			</el-form-item>
			<el-form-item label="物料" prop="partCode">
				<el-input v-model="queryParams.partCode" placeholder="请输入物料" />
			</el-form-item>
			<el-form-item label="装箱时间">
				<el-date-picker v-model="dateRangePackTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
					value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" :shortcuts="dateOptions">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
				<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具区域 -->
		<el-row :gutter="15" class="mb10">
			<el-col :span="1.5">
				<el-button type="primary" v-hasPermi="['prod:onePackDetail:add']" plain icon="plus" @click="handleAdd">
					{{ $t('btn.add') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" :disabled="single" v-hasPermi="['prod:onePackDetail:edit']" plain icon="edit"
					@click="handleUpdate">
					{{ $t('btn.edit') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="multiple" v-hasPermi="['prod:onePackDetail:delete']" plain icon="delete"
					@click="handleDelete">
					{{ $t('btn.delete') }}
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
		</el-row>

		<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
			highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column prop="detailId" label="明细Id" width="320" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('detailId')" />
			<el-table-column prop="onePackId" label="一级装箱id" width="320" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('onePackId')" />
			<el-table-column prop="onePackNo" label="箱号" width="160" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('onePackNo')" />
			<el-table-column prop="orgCode" label="组织" width="160" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('orgCode')" />
			<el-table-column prop="partCode" label="物料" width="160" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('partCode')" />
			<el-table-column prop="supplierCode" label="供应商" width="160" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('supplierCode')" />
			<el-table-column prop="packNum" label="装箱数量" width="120" align="center" v-if="columns.showColumn('packNum')" />
			<el-table-column prop="packTime" label="装箱时间" width="160" :show-overflow-tooltip="true"
				v-if="columns.showColumn('packTime')" />
			<el-table-column prop="packUserId" label="装箱人" width="120" align="center"
				v-if="columns.showColumn('packUserId')" />
			<el-table-column prop="itemStatus" label="明细状态" width="120" align="center"
				v-if="columns.showColumn('itemStatus')">
				<template #default="scope">
					<dict-tag :options="options.pack_item_status" :value="scope.row.itemStatus" />
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="160" align="center" fixed="right">
				<template #default="scope">
					<el-button-group>
						<el-button text v-hasPermi="['prod:onePackDetail:edit']" type="success" icon="edit"
							@click="handleUpdate(scope.row)">
							{{ $t('btn.edit') }}
						</el-button>
						<el-button text v-hasPermi="['prod:onePackDetail:delete']" type="danger" icon="delete"
							@click="handleDelete(scope.row)">
							{{ $t('btn.delete') }}
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="getList" />


		<el-dialog draggable :close-on-click-modal="false" :title="title" :lock-scroll="false" v-model="open">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
				<el-row :gutter="20">
					<!-- <el-col :lg="12">
						<el-form-item label="明细Id" prop="detailId">
							<el-input v-model="form.detailId" placeholder="请输入明细Id" :disabled="opertype != 1" />
						</el-form-item>
					</el-col> -->
					<!-- <el-col :lg="12">
						<el-form-item label="一级装箱id" prop="onePackId">
							<el-input v-model="form.onePackId" placeholder="请输入一级装箱id" />
						</el-form-item>
					</el-col> -->
					<el-col :lg="12">
						<el-form-item label="组织" prop="orgCode">
							<el-input v-model="form.orgCode" placeholder="请输入组织" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="物料" prop="partCode">
							<el-input v-model="form.partCode" placeholder="请输入物料" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="供应商" prop="supplierCode">
							<el-input v-model="form.supplierCode" placeholder="请输入供应商" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="装箱数量" prop="packNum">
							<el-input v-model="form.packNum" placeholder="请输入装箱数量" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="装箱时间" prop="packTime">
							<el-date-picker v-model="form.packTime" type="datetime" placeholder="选择日期时间"
								value-format="YYYY-MM-DD HH:mm:ss">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="装箱人" prop="packUserId">
							<el-input v-model.number="form.packUserId" placeholder="请输入装箱人" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="明细状态" prop="itemStatus">
							<el-radio-group v-model="form.itemStatus">
								<el-radio v-for="item in options.pack_item_status" :key="item.dictValue" :value="item.dictValue">
									{{ item.dictLabel }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="opertype != 3">
				<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="prodonepackdetail">
import {
	pageProdOnePackDetail,
	addProdOnePackDetail, delProdOnePackDetail,
	updateProdOnePackDetail, getProdOnePackDetail,
}
	from '@/api/prodManage/prodOnePackDetail.js'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	sort: '',
	sortType: 'asc',
	onePackId: undefined,
	orgCode: undefined,
	partCode: undefined,
	packTime: undefined,
})
const columns = ref([
	{ visible: false, prop: 'detailId', label: '明细Id' },
	{ visible: false, prop: 'onePackId', label: '一级装箱id' },
	{ visible: true, prop: 'onePackNo', label: '箱号' },
	{ visible: true, prop: 'orgCode', label: '组织' },
	{ visible: true, prop: 'partCode', label: '物料' },
	{ visible: true, prop: 'supplierCode', label: '供应商' },
	{ visible: true, prop: 'packNum', label: '装箱数量' },
	{ visible: true, prop: 'packTime', label: '装箱时间' },
	{ visible: true, prop: 'packUserId', label: '装箱人' },
	{ visible: true, prop: 'itemStatus', label: '明细状态' },
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])

// 装箱时间时间范围
const dateRangePackTime = ref([])

//装箱Id
const route = useRoute()
const packId = route.query.packId
queryParams.onePackId = packId

var dictParams = [
	"pack_item_status",
]

proxy.getDicts(dictParams).then((response) => {
	response.data.forEach((element) => {
		state.options[element.dictType] = element.list
	})
})

function getList() {
	proxy.addDateRange(queryParams, dateRangePackTime.value, 'PackTime');
	loading.value = true
	pageProdOnePackDetail(queryParams).then(res => {
		const { code, data } = res
		if (code == 200) {
			dataList.value = data.result
			total.value = data.totalNum
			loading.value = false
		}
	})
}

// 查询
function handleQuery() {
	queryParams.pageNum = 1
	getList()
}

// 重置查询操作
function resetQuery() {
	// 装箱时间时间范围
	dateRangePackTime.value = []
	proxy.resetForm("queryRef")
	queryParams.onePackId = packId
	handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.detailId);
	single.value = selection.length != 1
	multiple.value = !selection.length;
}
// 自定义排序
function sortChange(column) {
	var sort = undefined
	var sortType = undefined

	if (column.prop != null && column.order != null) {
		sort = column.prop
		sortType = column.order

	}
	queryParams.sort = sort
	queryParams.sortType = sortType
	handleQuery()
}

/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
	single: true,
	multiple: true,
	form: {},
	rules: {
		detailId: [{ required: true, message: "明细Id不能为空", trigger: "blur" }],
		onePackId: [{ required: true, message: "一级装箱id不能为空", trigger: "blur" }],
		partCode: [{ required: true, message: "物料不能为空", trigger: "blur" }],
		packNum: [{ required: true, message: "装箱数量不能为空", trigger: "blur" }],
	},
	options: {
		// 明细状态（0临时，1正常，9取消） 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		pack_item_status: [],
	}
})

const { form, rules, options, single, multiple } = toRefs(state)

// 关闭dialog
function cancel() {
	open.value = false
	reset()
}

// 重置表单
function reset() {
	form.value = {
		detailId: null,
		onePackId: packId,
		orgCode: null,
		partCode: null,
		supplierCode: null,
		packNum: null,
		packTime: null,
		packUserId: null,
		itemStatus: null,
	};
	proxy.resetForm("formRef")
}


// 添加按钮操作
function handleAdd() {
	reset();
	open.value = true
	title.value = '添加一级装箱明细'
	opertype.value = 1
	form.value.detailId = proxy.parseGuid();
}
// 修改按钮操作
function handleUpdate(row) {
	reset()
	const id = row.detailId || ids.value
	getProdOnePackDetail(id).then((res) => {
		const { code, data } = res
		if (code == 200) {
			open.value = true
			title.value = '修改一级装箱明细'
			opertype.value = 2

			form.value = {
				...data,
			}
		}
	})
}

// 添加&修改 表单提交
function submitForm() {
	proxy.$refs["formRef"].validate((valid) => {
		if (valid) {
			if (form.value.detailId != undefined && opertype.value === 2) {
				updateProdOnePackDetail(form.value).then((res) => {
					proxy.$modal.msgSuccess("修改成功")
					open.value = false
					getList()
				})
			} else {
				addProdOnePackDetail(form.value).then((res) => {
					proxy.$modal.msgSuccess("新增成功")
					open.value = false
					getList()
				})
			}
		}
	})
}

// 删除按钮操作
function handleDelete(row) {
	const Ids = row.detailId ? [row.detailId] : undefined || ids.value
	proxy
		.$confirm('是否确认删除"' + Ids.length + '"条数据项？', "警告", {
			confirmButtonText: proxy.$t('common.ok'),
			cancelButtonText: proxy.$t('common.cancel'),
			type: "warning",
		})
		.then(function () {
			return delProdOnePackDetail(Ids)
		})
		.then(() => {
			getList()
			proxy.$modal.msgSuccess("删除成功")
		})
}




handleQuery()
</script>